<template>
  <view class="publish-container">
    <view class="input-area">
      <input v-model="title" placeholder="请输入标题" class="title-input" />
      <textarea
        v-model="content"
        placeholder="分享你的想法..."
        class="content-input"
      />
    </view>

    <view class="image-upload">
      <view v-for="(image, index) in images" :key="index" class="image-item">
        <image :src="image.url" mode="aspectFill" />
        <text @click="removeImage(index)" class="remove-btn">×</text>
      </view>
      <view v-if="images.length < 9" class="upload-btn" @click="chooseImage">
        <text class="iconfont icon-add">+</text>
      </view>
    </view>

    <button @click="publishContent" class="publish-btn">发布</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const pubIco = uniCloud.importObject('hm-api');
const userInfo = uni.getStorageSync('uni-id-pages-userInfo');
const title = ref('');
const content = ref('');
const images = ref([]);
console.log(JSON.stringify(userInfo), 'userInfo');
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - images.value.length,
    success: (res) => {
      const fineName = res.tempFilePaths[0].match(/[^\\/]+$/)[0];
      const filePath = res.tempFilePaths[0];
      uniCloud.uploadFile({
        filePath,
        cloudPath: fineName,
        success: (res) => {
          images.value.push({
            url: res.fileID,
          });
        },
      });
      console.log(JSON.stringify(images.value), 'images');
    },
  });
};

const removeImage = (index) => {
  images.value.splice(index, 1);
};

const publishContent = async () => {
  if (!title.value.trim()) {
    uni.showToast({
      title: '请输入标题',
      icon: 'none',
    });
    return;
  }

  if (!content.value.trim() && images.value.length === 0) {
    uni.showToast({
      title: '请输入内容或上传图片',
      icon: 'none',
    });
    return;
  }
  const {
    _id,
    avatar_file: { url },
  } = userInfo;
  let params = {
    userId: _id,
    userAvatar: url,
    title: title.value,
    content: content.value,
    images: images.value || [],
  };
  console.log(JSON.stringify(params), 'params');
  const res = await pubIco.publish(params);
  console.log(res, 'res');
  // 这里添加发布逻辑
  console.log('发布标题:', title.value);
  console.log('发布内容:', content.value);
  console.log('发布图片:', images.value);

  uni.showToast({
    title: '发布成功',
    icon: 'success',
    success: () => {
      uni.navigateBack({
        delta: 1,
      });
    },
  });
};
</script>

<style lang="scss">
.publish-container {
  padding: 20rpx;
}

.input-area {
  margin-bottom: 20rpx;
}

.title-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.content-input {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.image-item {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }

  .remove-btn {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    font-size: 24rpx;
  }
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx dashed #999;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon-add {
    font-size: 60rpx;
    color: #999;
  }
}

.publish-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
  font-size: 32rpx;
}
</style>
